<template>
  <div>
    <div class="bgy-screen-top">

      <div class="top-left" v-if="loginType === 'login'">
        <div class="top-logo"></div>
        <div class="bgy-line left" style="margin-top: 27px"></div>
        <div class="top-quit" @click="back" v-if="currentUser.departmentType !== 13 && loginType === 'login'">
          <i class="iconfont icon-back pointer"></i>
        </div>
        <p class="top-name">
          <span class="top-name-span" :title="$route.query.name">{{$route.query.name}}</span>
        </p>
      </div>
      <div class="top-left" v-else-if="loginType === 'loginCompany'">
        <div class="top-logo"></div>
      </div>

      <div class="top-left" v-else>
        <div class="top-logo"></div>
        <div class="bgy-line left"></div>
        <!--<div class="top-quit" @click="back">-->
          <!--<i class="iconfont icon-back pointer"></i>-->
        <!--</div>-->
        <div class="top-logo-zhihui left" v-if="projectDetail.propertyStr === 1"></div>
        <div class="top-logo-shuz left" v-if="projectDetail.propertyStr === 2"></div>
        <div class="top-quit" @click="backTovideoarea" v-if="showProBack" style="margin-left: 20px;">
          <i class="iconfont icon-back pointer"></i>
        </div>
      </div>

      <div class="top-center relative">
        <div class="top-title" v-if="loginType === 'login'"></div>
        <div class="top-noImg-title" v-else-if="loginType === 'loginCompany'"><span ref="projectTitle">智慧工地 · <span>{{currentUser.companyTitle || '集团总部'}}</span></span></div>
        <div class="top-noImg-title" v-else><span ref="projectTitle">{{projectDetail.projectShowName}}</span></div>
        <div class="top-light"></div>
      </div>

      <div class="top-right">
        <span class="top-time">{{time}}</span>

        <zz-retrieve
          class="mr20"
          :leftBorder = true
          :left="-154"
          @show="showRetrieve"
          ref="retrieveIndex"
          :height="372"
          :stage="loginType === 'projectLogin'"
          :isVideoRouter="loginType === 'projectLogin' || loginType === 'loginCompany'"
          :isProject = "loginType === 'projectLogin' || loginType === 'loginCompany'"
          :isCompanyRouter="loginType === 'loginCompany'"
          :isMonitor="loginType === 'login'"
          fontSize="24px"
          style="margin-left: -5px; line-height: 20px;"
        ></zz-retrieve>

        <zz-history @choose="enterHistoryProjects" class="mr20" v-if="loginType === 'login'"></zz-history>

        <span class="t-left mr20" v-if="$route.query.auto">
            <i class="iconfont icon-zu6" style="font-size: 25px" @click="autoHandle(false)" v-if="screenSetting.auto" title="手动播放"></i>
            <i class="iconfont icon-zu6" style="font-size: 25px" @click="autoHandle(true)" v-else title="自动轮播"></i>
        </span>

        <span class="relative t-left mr20">
          <i class="iconfont icon-setting" :class="{topHover: isShowSetting}" @click="showSetting"></i>
          <div class="top-time-com" style="height: 195px; width: 250px;" v-show="isShowSetting" @mouseleave="isShowSetting = false">
            <p class="top-time-title">
              <span>设置</span>
              <span class="right pointer" @click="quit">退出</span>
            </p>
            <div class="top-time-content">
              <div class="clear">
                <div class="top-layout" v-for="item in layouts" @click="chooseLayout(item)" :class="{timeHover: item.hover}">
                  <p><i class="iconfont" :class="`icon-${item.icon}`"></i></p>
                  <p>{{item.name}}</p>
                </div>
              </div>
              <div class="top-time-div" id="top-time-div">
                <span>自动轮播时间</span>
                <zz-select
                  v-validation="{select: true, query: 'carouselTime'}"
                  :border= true
                  :options="{width: '50px'}"
                  :option="timeList"
                  background="none"
                  optionBackground="rgba(10, 57, 79, 0.9)"
                  selectOption="selectScreenOption"
                  :name = "`${carouselTime}`"
                  @optionClick="carouselTimeCallback">
                </zz-select>
                <span>秒</span>
              </div>
              <div class="t-right">
                <button class="time-buttton" @click="confirm">确认</button>
              </div>
            </div>
          </div>
        </span>

        <span class="relative t-left" v-if="isFullScreen">
          <i class="iconfont icon-daquanping pointer" style="font-size: 22px" @click="fullScreen"></i>
        </span>

        <span class="relative t-left" v-else>
          <i class="iconfont icon-tuiquanping pointer"  style="font-size: 22px" @click="exitScreen"></i>
        </span>

      </div>
    </div>
    <div class="bgy-screen-text">
       <zz-marquee ref="marquee" :contentList="constent" width="90%"></zz-marquee>
    </div>
    <div class="bgy-screen-content">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  export default {
    data () {
      return {
        time: '',
        loginType: '',
        isFullScreen: true,
        isShowRecording: false,
        isShowSetting: false,
        projectDetail: {},
        timeOption: {},
        layoutItem: {windsNum: 9},
        constent: [
          '把安全、质量放在首位！',
          '一切不能保证安全质量的施工都要停工！',
          '合法合规、对人好、对社会好。',
          '集团要建立安全文化，所有的行为、想法都要以安全为中心。',
          '建立一个最好的安全体系，按照追求‘零伤亡’的目标去谋划所有的事。'
        ],
        layouts: [
          {icon: 'zu12', name: '2x2', hover: false, windsNum: 4},
          {icon: 'layout3x3', name: '3x3', hover: true, windsNum: 9},
          {icon: 'layout4x4', name: '4x4', hover: false, windsNum: 16}
        ],
        timeList: {
          60: 60,
          90: 90,
          120: 120,
          150: 150,
          180: 180
        },
        carouselTime: '60',
        isVideoRouter: false,
        recording: [],
        showProBack: false,
        backParam: ''
      }
    },
    computed: {
      ...mapGetters({
        video: 'getVideo',
        videoNode: 'getVideoNode',
        screenSetting: 'getScreenSetting',
        currentUser: 'currentUser'
      })
    },
    watch: {
      'video.time' (val) {
        this.carouselTime = val
      },
      'video.windsNum' () {
        this.lauoutShow()
      },
      currentUser () {
        // 在项目端视频监控和项目大屏的情况下
        if (this.$route.name === 'screenVideoProject' && this.loginType === 'projectLogin') {
          this.$router.push({name: 'screenVideoProject', query: {pjId: this.currentUser.pjId, name: this.currentUser.pjName, auto: true}})
          this.getProjectInfo()
        }
      },
      '$route.name' (newValue, oldValue) {
        this.loginType = this.$local.get('login')
        if (newValue === 'screenVideoProject') {
          this.getProjectInfo()
        }
        if (oldValue === 'screenVideoArea') {
          this.showProBack = true
          window.PRODUCT_BACK = true
        } else {
          this.showProBack = false
          window.PRODUCT_BACK = false
        }
        if (oldValue === 'screenVideoControl') {
          if (this.$route.query.backBtn) {
            this.showProBack = true
            window.PRODUCT_BACK = true
          } else {
            this.showProBack = false
            window.PRODUCT_BACK = false
          }
        }
        // if (newValue === 'screenVideoArea') {
        // } else if (newValue === 'screenVideoProject') {
        //   this.loginType = this.$local.get('login')
        // }
      }
    },
    mounted () {
      this.carouselTime = this.video.time
      this.loginType = this.$local.get('login')
      if (this.loginType === 'projectLogin' && this.$route.name !== 'screenVideoArea') {
        if (this.currentUser.stageId) {
          this.getProjectInfo()
        } else {
          this.$store.dispatch({
            type: 'actStage'
          }).then(() => {
            this.getProjectInfo()
          })
        }
      }
      this.setTime()
      this.lauoutShow()
      if (this.videoNode.first) {
        this.$store.commit('setVideoNodeCompany', {first: false})
        this.getOnlineRate()
      }
      setInterval(() => {
        this.getOnlineRate()
      }, 1000 * 60 * 5)
    },
    beforeRouteLeave (to, from, next) {
      window.clearInterval(this.getOnlineRateInterval)
      next()
    },
    beforeRouteUpdate (to, from, next) {
      if (from.name === 'screenVideoArea') {
        this.backParam = from.query
      }
      next()
    },
    activated () {
      this.getOnlineRate()
    },
    methods: {
      backTovideoarea () {
        // this.$router.back(-1)
        this.$router.push({name: 'screenVideoArea', query: this.backParam})
      },
      autoHandle (status) {
        this.$store.commit('editScreenSetting', {auto: status})
      },
      getProjectInfo () {
        const data = {
          'stageId': this.currentUser.stageId,
          'pjId': this.currentUser.pjId
        }
        this.$axios({
          method: 'post',
          url: `${this.$site.videoServer}/api/screen/getProjectInfo`,
          closeSaveRequest: true,
          data: this.$qs.stringify(data, {indices: false})
        }).then(res => {
          this.projectDetail = res.data.data
        })
      },
      back () {
        if (this.$Browser().trident) {
          if (document.getElementById('mpv')) {
            var ocxObj = document.getElementById('mpv')
            ocxObj.MPV_Uninit()
          } else {
            var ocxSINGERObj = document.getElementById('spv')
            ocxSINGERObj.MPV_Uninit()
          }
        }
        this.$router.push({name: 'videoMap'})
      },
      fullScreen () {
        this.$fullScreen()
        this.isFullScreen = false
      },
      exitScreen () {
        this.$fullExit()
        this.isFullScreen = true
      },
      getOnlineRate () {
        let departmentId = this.currentUser.departmentId
        let departmentName = this.currentUser.departmentName
        if (this.currentUser.advancedAdmin) {
          departmentId = ''
          departmentName = ''
        }
        const data = {
          mid: this.currentUser.mid,
          coId: this.currentUser.coId,
          departmentId: departmentId,
          departmentName: departmentName
        }
        let url = `${this.$site.videoServer}/api/hikvision8700/getOnlineRate`
        if (this.loginType === 'loginCompany') {
          // 如果是企业大屏进入这里需要部门ID
          data.departmentId = this.$route.query.departmentId
          data.departmentName = this.$route.query.departmentId ? this.$route.query.name : ''
          url = `${this.$site.videoServer}/api/hikvision8700/getOnlineRateForListPage`
        }
        this.$axios({
          method: 'post',
          closeMessage: true,
          closeLoading: true,
          data: this.$qs.stringify(data),
          url: url
        }).then(res => {
          this.$store.commit('setVideoNode', res.data.data)
        })
      },
      lauoutShow () {
        if (this.video.windsNum === 9) {
          this.layouts[0].hover = false
          this.layouts[1].hover = true
          this.layouts[2].hover = false
        } else if (this.video.windsNum === 16) {
          this.layouts[0].hover = false
          this.layouts[1].hover = false
          this.layouts[2].hover = true
        } else if (this.video.windsNum === 4) {
          this.layouts[0].hover = true
          this.layouts[1].hover = false
          this.layouts[2].hover = false
        }
      },
      carouselTimeCallback (item) {
        this.carouselTime = item.value
      },
      setTime () {
        this.time = this.$moment().format('YYYY-MM-DD HH:mm,  ddd')
        setInterval(() => {
          this.time = this.$moment().format('YYYY-MM-DD HH:mm,  ddd')
        }, 1000)
      },
      chooseLayout (item) {
        this.layouts = this.layouts.map((item) => {
          item.hover = false
          return item
        })
        this.layoutItem = item
        item.hover = true
      },
      showRetrieve () {
        this.isShowRecording = false
        this.isShowSetting = false
      },
      showSetting () {
        this.isShowRecording = false
        this.$refs.retrieveIndex.visible = false
        this.isShowSetting = !this.isShowSetting
      },
      enterHistoryProjects (item) {
        this.$router.push({name: 'videoProject', query: {pjId: item.projectId, name: item.projectTitle}})
      },
      confirm () {
        this.$vaildation(this).then(() => {
          this.$store.commit('editVideo', {windsNum: this.layoutItem.windsNum, time: this.carouselTime, query: true})
          let ocxObj = document.getElementById('mpv')
          ocxObj.MPV_SetPlayWndCount(parseInt(this.layoutItem.windsNum, 10))
        })
      },
      quit () {
        if (this.$Browser().trident) {
          if (document.getElementById('mpv')) {
            var ocxObj = document.getElementById('mpv')
            ocxObj.MPV_Uninit()
          } else {
            var ocxSINGERObj = document.getElementById('spv')
            ocxSINGERObj.MPV_Uninit()
          }
        }
        this.$axios({
          method: 'post',
          url: `${this.$site.passportServer}/front/logout.htm`
        }).then(res => {
          this.$store.commit('resetCurrUser')
          this.$router.push({name: this.$route.meta.loginType})
        })
      }
    }
  }
</script>
<style lang="scss">
  .bgy-screen-text{
    background-image: url("/static/images/bgy-text.png");
    background-size: 100%;
    height: 102px;
    line-height: 102px;
    position: relative;
    z-index: 1;
  }
  .bgy-screen-content{
    margin: 0 20px 20px 20px;
    .bgy-screen-table{
      width: 100%;
      display: table;
      .bgy-screen-left{
        display: table-cell;
        vertical-align: top;
        width: 100%;
        padding-right: 10px;
      }
      .bgy-screen-right{
        width: 340px;
        display: table-cell;
        vertical-align: top;
        .project-online{
          color: $color-screen;
          margin-top: 4px;
        }
        .project-online-length{
          font-size: 28px;
          font-weight: bold;
          margin-top: 10px;
          color: #fff;
        }
        .project-line{
          width: 1px;
          height: 62px;
          margin: 0 15px;
          background: #055483;
        }
        .camera-online{
          color: $color-screen;
        }
        .camera-arrow{
          width: 60px;
          color: #fff;
        }
        .camera-up{
          color: #00ff60;
        }
        .camera-down{
          margin-top: 17px;
          color: #ff0000;
        }
        .camera-online-length{
          color: #fff;
          font-size: 20px;
          margin-left: 5px;
          margin-right: 5px;
        }
        .icon-jianyoushang{
          color: #00ff60;
          margin-top: 2px;
          display: inline-block;
        }
        .icon-jianyouxia{
          display: inline-block;
          color: #ff0000;
        }
      }
    }
  }
  .tableP-screen{
    border-left: 3px $color-screen solid;
    >span{
      color: #a9c5ec;
      margin-left: 10px;
    }
  }
</style>
